<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书籍列表</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
	   $(function(){
	       $('#booklist').datagrid({  
				title:'书籍列表',  
				iconCls:'icon-save',   
				url:'json/datagrid_data1.json',  
				columns:[[  
					{field:'a',title:'名称',width:100,align:'center'},  
          {field:'b',title:'作者',width:200,align:'center'},  
          {field:'d',title:'单价',width:80,align:'center'},  
          {field:'e',title:'ISBN',width:200,align:'center'},  
          {field:'f',title:'出版社',width:200,align:'center'},
          {field:'e',title:'进货数',width:200,align:'center'},
          {field:'e',title:'销售数',width:200,align:'center'},
          {field:'e',title:'总金额',width:200,align:'center'}			
				]],  
				pagination: true,//表示在datagrid设置分页              
               	pageSize: 5,
				singleSelect:true,
                pageList: [5,10,20]
			});

		 //初始化查询栏
		 $("#submit_search").linkbutton({ iconCls: 'icon-search', plain: true })
            .click(function () {
                $('#dg').datagrid({ queryParams: form2Json("searchform") });   //点击搜索
            });
          
          //初始化修改窗口  
         $('#dd').dialog({
			    title: 'My Dialog',
			    width: 700,
			    height: 500,
			    closed: true,
			    cache: false,
			    href: '',
			    modal: true,
			    iconCls: 'icon-save',
                buttons: [{
                    text:'提交',
                    iconCls:'icon-ok',
                    handler:function(){
                        alert('ok');
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        alert('cancel');;
                    }
                }]
			});
            
	   });
	</script>
</head>
<body>
   <form name="searchform" method="post" action="" id ="searchform">
    <td width="70" height="30"><strong>书籍查询：</strong></td>
    <td height="30">
        <input type="text" name="keyword" size=20 placeholder="书籍名称"/>
         <input type="text" name="keyword" size=20 placeholder="ISBN"/>
    </td>
	  <td>
	  <a id="submit_search">搜索</a>
	</td>
  </form>
  <table id="booklist"></table>
</body>
</html>